<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border: 1px solid black;
            border-collapse: collapse;
            margin: 10px auto;
        }

        th,
        td {
            border: 1px solid black;
            padding: 15px;
            text-align: center;
        }
        form{
            width: 420px;
            height: 50px;
            margin: auto;
            position: relative;
        }
        #empTable tr:nth-child(2n){
            background-color: violet;
        }
        th{
            background-color: #999999;
        }
        form input{
            height: 40px;
            outline: none;
            width: 350px;
        }
        form button{
            height: 44px;
            width: 60px;
            position: absolute;
        }
        #add{
            height: 45px;
            width: 80px;
            background-color: pink;
            margin-left: 1075px;
            border: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .page{
            text-align: center;
        }
        .page a{
            text-decoration: none;
            color: black;
            padding: 0 20px;
        }
    </style>
    <script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<form>
    <input type="text" placeholder="请输入用户姓名" autocomplete="off" class="inp">
    <button id="sear" type="button">搜索</button>
</form>
<a href="adduser.html"><button type="button" id="add">添加</button></a>
<table id="empTable">
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>密码</th>
        <th>手机号</th>
        <th>性别</th>
        <th>角色</th>
        <th>操作</th>
        <th><input type="checkbox" class="cheAll"><button type="button" class="pidelete">批量删除</button></th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<div class="page">
    <a href="javascript:void(0)" id="first" class="pages">首页</a>
    <a href="javascript:void(0)" id="prve" class="pages">上一页</a>
    <a href="javascript:void(0)" id="next" class="pages">下一页</a>
    <a href="javascript:void(0)" id="last" class="pages">最后一页</a>
</div>
<script>
    //复选框全选
    let cheAll=$(".cheAll")
    cheAll.click(function (){
        let checkedAll=cheAll.prop("checked")
        $(".che").prop("checked",checkedAll)
        console.log($(".che"))
    })
     function cheFo() {
        cheAll.prop("checked",$(".che").length==$(".che:checked").length)
     }
     //批量删除
    $(".pidelete").click(function(){
        let arr = [];
        $(".che:checked").each(function(){
            let user_id = parseInt($(this).closest('tr').find('.user_id').text(), 10);
            arr.push(user_id);
        });
        if (arr.length === 0){
            alert("请至少选中一个用户！");
            return;
        }
        $.ajax({
            type: "POST",
            url: "/deleteInBulk.do",
            data: JSON.stringify(arr),  // 使用 JSON.stringify 序列化数组
            contentType: "application/json; charset=UTF-8",  // 设置请求的内容类型
            success: function(data){
                if (data === "true"){
                    alert("删除成功！");
                    location.reload(); // 刷新页面
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error("请求失败:", textStatus, errorThrown);
                console.error("响应内容:", jqXHR.responseText);
            }
        });
    });
    //模糊查找
    $("#sear").click(function(){
        $.ajax({
            type: "POST",
            url: "/findByVague.do",
            data: {
                "username": $(".inp").val()
            },
            success: function(data){
                let tableBody2 = $("#empTable tbody");
                // 清空表格
                tableBody2.empty();
                $.each(data, function(index, obj){
                    let row = $("<tr></tr>");
                    row.append($("<td class='user_id'></td>").text(obj.user_id));
                    row.append($("<td class='username'></td>").text(obj.username));
                    row.append($("<td class='password'></td>").text(obj.password));
                    row.append($("<td class='tel'></td>").text(obj.tel));
                    row.append($("<td class='sex'></td>").text(obj.sex));
                    row.append($("<td class='rolename'></td>").text(obj.role.rolename));
                    row.append($("<td><a href='#' class='delet'>删除</a> <a href='#' class='update'>修改</a></td>"));
                    row.append(("<td><input type='checkbox' class='che' onclick='cheFo()'></td>"))
                    tableBody2.append(row);
                });
            }
        });
    });
    // 删除功能
    $("#empTable").on('click', '.delet', function(){
            $.ajax({
                type:"post",
                url:"/daleteUser.do",
                data:{
                    "user_id":$(this).closest('tr').find('.user_id').text()
                },
                success:function(data){
                    if (data>0){
                        alert("删除成功！")
                        location.reload(); // 刷新页面
                    }
                }
            })
        })
    //修改功能
    $("#empTable").on('click', '.update', function(){
        // 获取当前行的各个参数
        var user_id = $(this).closest('tr').find('.user_id').text();
        var username = $(this).closest('tr').find('.username').text();
        var password = $(this).closest('tr').find('.password').text();
        var tel = $(this).closest('tr').find('.tel').text();
        var sex = $(this).closest('tr').find('.sex').text();

        // 构造URL，带上参数
        var url = "userUpdate.html?user_id=" + encodeURIComponent(user_id) +
            "&username=" + encodeURIComponent(username) +
            "&password=" + encodeURIComponent(password) +
            "&tel=" + encodeURIComponent(tel) +
            "&sex=" + encodeURIComponent(sex);
        // 跳转到修改页面
        window.location.href = url
    })
    //分页
    let pageNum;
    let totalPage;
    $(function(){
        let getEmpList=function(){
            $.ajax({
                type:"POST",
                url:"/findUserPage.do",
                contentType: "application/json",
                data:JSON.stringify({
                    "pageNum":pageNum||1,
                    "pageSize":5
                }),
                success:function(result){
                    let tableBody = $("#empTable tbody");
                    //清空表格
                    tableBody.empty();
                    $.each(result.list,function(index,obj){
                        let row = $("<tr></tr>");
                        row.append($("<td class='user_id'></td>").text(obj.user_id));
                        row.append($("<td class='username'></td>").text(obj.username));
                        row.append($("<td class='password'></td>").text(obj.password));
                        row.append($("<td class='tel'></td>").text(obj.tel));
                        row.append($("<td class='sex'></td>").text(obj.sex));
                        row.append($("<td class='rolename'></td>").text(obj.role.rolename));
                        row.append($("<td><a href='#' class='delet'>删除</a> <a href='#' class='update'>修改</a></td>"));
                        row.append(("<td><input type='checkbox' class='che' onclick='cheFo()'></td>"))
                        tableBody.append(row);
                    })
                    pageNum=result.pageNum
                    totalPage=result.totalPage
                    console.log(totalPage)
                }
            })
        }
        //上一页
        $(".pages").click(function(){
            let flag=$(this).attr("id")
            if (flag=="first"){
                pageNum=1
                getEmpList()
            }else if(flag=="prve"){
                if (pageNum>1){
                    pageNum--
                    getEmpList()
                }else {

                }
            }else if(flag=="next"){
                if (pageNum==totalPage){

                }else{
                    pageNum=pageNum+1
                    getEmpList()
                }
            }else if(flag=="last"){
                pageNum=totalPage
                getEmpList()
            }

        })
        getEmpList()
    })
</script>
</body>

</html>